const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      cleanCss = require('gulp-clean-css'),
      autoprefixer = require('gulp-autoprefixer'),
      babel = require('gulp-babel'),
      uglify = require('gulp-uglify'),
      connect = require('gulp-connect'),
      sass = require('gulp-sass')
      del = require('del'),
      proxy = require('http-proxy-middleware')

// 把所有任务涉及到的路径做一个统一规划
const path = {
    html: {
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css: {
        src: 'src/css/**/*.scss',
        dest: 'dist/css'
    },
    js: {
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    },
    img:{
        src:'src/images/**/*',
        dest:'dist/images'
    },
    libs:{
        src:'src/libs/**/*',
        dest:'dist/libs'
    }
}
const delDist =()=>del('dist')

// 指定html任务：压缩html文件
const html = () => {
    // ** 所有目录
    // * 所有文件
    return gulp.src(path.html.src)
        .pipe(htmlmin({
            removeComments: true,//清除HTML注释
        	collapseWhitespace: true,//压缩HTML
        	collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
      		removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
      		removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
      		removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
      		minifyJS: true,//压缩页面JS
      		minifyCSS: true//压缩页面CSS
        }))
        .pipe(gulp.dest(path.html.dest))
        .pipe(connect.reload())
}

// 指定css任务：给一些css3的样式自动加前缀，然后压缩
const css = () => {
    return gulp.src(path.css.src)
        .pipe(sass())//先编译
        .pipe(autoprefixer())
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
        .pipe(connect.reload())
}

// 指定js任务：先ES6转ES5，然后压缩
const js = () => {
    return gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(path.js.dest))
        .pipe(connect.reload())
}

//images任务：把图片移到dist
const img = ()=>gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))
//把libs移到dist
const libs = ()=>gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

//指定任务
const server=()=>{
    connect.server({
        root:'dist',//项目运行根目录
        port: 2323,//服务器自定义端口号
        livereload: true,//支持热更新
        middleware(){
            return [
                //将来url以api开头的实现代理apache服务器
                proxy.createProxyMiddleware('/api', {
                    target: 'http://localhost',
                    changeOrigin:true
                }) 
            ]     
        }
    })
}

//watch任务：监听文件的改变，当文件内容发送改变时候重启对应任务
const watch = ()=>{
    //html文件发生修改时重新执行html任务
    gulp.watch(path.html.src,html)
    gulp.watch(path.css.src,css)
    gulp.watch(path.js.src,js)
}

// 导出任务
//单个导出，只能单个运行
// module.exports = {
//     html,
//     css,
//     js,
//     img,
//     watch,
//     server,
//     delDist,
//     libs
// }

//默认任务default，可以把所有任务都放进
//series同步执行，先执行dist任务，在执行其他任务
//parallel异步执行（并行）不会互相影响任务执行
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js,img, libs, server, watch))